<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Ajj">
    <title>订单</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        ul li {
            list-style: none;
        }
        
        .outer {
            width: 500px;
            margin: 50px auto;
        }
        
        .outer ul {
            float: left;
            padding: 0;
        }
        
        li {
            padding: 5px 15px;
            border: 1px solid #333;
            cursor: pointer;
        }
        
        .d {
            border-top: none;
            text-align: center;
            display: none;
        }        
        .xs {
            border-right: none;
        }
        p{
            position: relative;
            top: 200px;
            left: -20px;
            color: red;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <ul class="ss">
            <li class="xs">销售订单</li>
            <li class="d">订单1</li>
            <li class="d">订单2</li>
            <li class="d">订单3</li>
        </ul>
        <ul class="ff">
            <li class="xf">消费订单</li>
            <li class="d">消费1</li>
            <li class="d">消费2</li>
            <li class="d">消费3</li>
        </ul>
    </div>
    <p></p>
</body>

</html>
<script>
    $('ul').mouseover(function(index){
        $(this).find('.d').show();
        $(this).siblings().find('.d').hide();
    });
    $('.d').hover(function(){
        $(this).css('background-color','pink');
    },function(){
        $(this).css('background-color','white');
    });
    $('.d').click(function(){
        $('p').html($(this).html());
        $('.d').hide();
    });
</script>
